<template>
	<div class="wos-page">
		<div class="menu-top">
			<div class="wos-menu wos-hand" >
				<div :class="menu === '远程' ? 'active' : '' " @click="navGo(1)">远程</div>
				<div :class="menu === '通道名称' ? 'active' : '' " @click="menu = '通道名称'">通道名称</div>
				<div :class="menu === '编码设置' ? 'active' : '' " @click="navGo(3)">编码设置</div>
			</div>

			<div class="wos-nav wos-han" v-show="menu === '远程'">
				<div :class="nav === '设备' ? 'active' : '' " @click="nav = '设备'">设备</div>
				<div :class="nav === '升级' ? 'active' : '' " @click="nav = '升级'">升级</div>
				<div :class="nav === '信息' ? 'active' : '' " @click="nav = '信息'">信息</div>
			</div>

			<div class="wos-nav wos-han" v-show="menu === '编码设置'">
				<div :class="nav === '编码设置' ? 'active' : '' " @click="nav = '编码设置'">编码设置</div>
				<div :class="nav === '图片码流' ? 'active' : '' " @click="nav = '图片码流'">图片码流</div>
				<div :class="nav === '视频叠加' ? 'active' : '' " @click="nav = '视频叠加'">视频叠加</div>
			</div>
		</div>


		<div class="main" >
			<div id="plan-c" v-show="menu === '编码设置'">
				<div id="plan-c-c" v-show="nav === '视频叠加'">
					<div class="wos-flex">
						<div >
							<wos-video style="width:300px;height: 300px;line-height: 300px"></wos-video>
						</div>
						<div style="padding-left: 30px;">
							<div class="wos-flex margin10">
								<div class="input-title">通道：</div>
								<select class="wos-input input-width asd-width">
									<option value="普通">1</option>
									<option value="动检">2</option>
									<option value="报警">3</option>
								</select>
							</div>

							<div class="wos-flex margin10">
								<div style="padding-left: 20px">
									<input type="checkbox" checked>
								</div>
								<div style="padding-left: 20px">
									通道标题
								</div>
								<div style="padding-left: 20px">
									<button class="wos-btn wos-btn-no">设置</button>
								</div>
							</div>

							<div class="wos-flex margin10">
								<div style="padding-left: 20px">
									<input type="checkbox" checked>
								</div>
								<div style="padding-left: 20px">
									时间标题
								</div>
								<div style="padding-left: 20px">
									<button class="wos-btn wos-btn-no">设置</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="plan-c-b" v-show="nav === '图片码流'">
					<div style="width: 300px; margin-top:30px">
						<div class="wos-flex margin10">
							<div class="input-title">通道：</div>
							<select class="wos-input input-width asd-width">
								<option value="普通">1</option>
								<option value="动检">2</option>
								<option value="报警">3</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">主图类型：</div>
							<select class="wos-input input-width asd-width">
								<option value="264">定时</option>
								<option value="265">事件</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">图片大小：</div>
							<select class="wos-input input-width asd-width" disabled>
								<option value="">1920*1080（1080P)</option>
								<option value="">1280*960(1.3m)</option>
								<option value="">1280*720(1720P)</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">图片质量：</div>
							<select class="wos-input input-width asd-width">
								<option value="">6（最好）</option>
								<option value="">5</option>
								<option value="">4</option>
								<option value="">3</option>
								<option value="">2</option>
								<option value="">1</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">抓图帧率：</div>
							<select class="wos-input input-width asd-width">
								<option value="">1秒/张</option>
								<option value="">2秒/张</option>
								<option value="">3秒/张</option>
								<option value="">4秒/张</option>
								<option value="">5秒/张</option>
								<option value="">6秒/张</option>
								<option value="">7秒/张</option>
								<option value="">自定义</option>
							</select>
						</div>
					</div>
				</div>



				<div id="plan-c-a" v-show="nav === '编码设置'" class="wos-flex wos-flex-wrap">
					<div style="width: 300px">
						<div class="wos-flex">
							<div class="input-title">通道：</div>
							<select name="" id="" class="wos-input input-width asd-width">
								<option value="1">1</option>
							</select>
						</div>
					</div>
					<div style="width: 100%"></div>

					<div style="width: 300px; margin-top:30px">
						<div style="background-color: #e2e2e2;padding-top: 10px">
							主码流
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">码流类型：</div>
							<select class="wos-input input-width asd-width">
								<option value="普通">普通</option>
								<option value="动检">动检</option>
								<option value="报警">报警</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">编码模式：</div>
							<select class="wos-input input-width asd-width">
								<option value="264">H.264</option>
								<option value="265">H.265</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">智能编码：</div>
							<select class="wos-input input-width asd-width">
								<option value="">关闭</option>
								<option value="">开启</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">分辨率：</div>
							<select class="wos-input input-width asd-width">
								<option value="">1920*1080（1080P)</option>
								<option value="">1280*960(1.3m)</option>
								<option value="">1280*720(1720P)</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">帧率(FPS)：</div>
							<select class="wos-input input-width asd-width">
								<option value="">1</option>
								<option value="">2</option>
								<option value="">3</option>
								<option value="">4</option>
								<option value="">5</option>
								<option value="">6</option>
								<option value="">7</option>
								<option value="">8</option>
								<option value="">9</option>
								<option value="">10</option>
								<option value="">11</option>
								<option value="">12</option>
								<option value="">13</option>
								<option value="">14</option>
								<option value="">15</option>
								<option value="">16</option>
								<option value="">17</option>
								<option value="">18</option>
								<option value="">19</option>
								<option value="">21</option>
								<option value="">22</option>
								<option value="">23</option>
								<option value="">24</option>
								<option value="">25</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">码流控制：</div>
							<select class="wos-input input-width asd-width">
								<option value="">限定码流</option>
								<option value="">可变码流</option>
							</select>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">码流值：</div>
							<select class="wos-input input-width asd-width">
								<option value="">1792</option>
								<option value="">2048</option>
								<option value="">4096</option>
								<option value="">6144</option>
								<option value="">自定义</option>
							</select>
							<div style="position: absolute;margin-left: 310px">Kb/S</div>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">参考码流值：</div>
							<div>1792-6144Kb/s</div>
						</div>
						<div class="wos-flex margin10">
							<div style="padding-left: 20px">
								<input type="checkbox" checked>
							</div>
							<div style="padding-left: 20px">
								启用音频
							</div>
						</div>
						<div class="wos-flex margin10">
							<div class="input-title">音频编码：</div>
							<select class="wos-input input-width asd-width">
								<option value="">G.711A</option>
								<option value="">PCM</option>
								<option value="">G.711Mu</option>
								<option value="">G.726</option>
								<option value="">AAC</option>
							</select>
							<div style="position: absolute;margin-left: 310px">Kb/S</div>
						</div>
						<div class="wos-flex margin10">
							<div style="padding-left: 20px">
								<input type="checkbox" checked>
							</div>
							<div style="padding-left: 20px">
								启用水印
							</div>
						</div>
					</div>




					<div style="width: 300px; margin:30px 0 0 100px">
						<div style="background-color: #e2e2e2;padding-top: 10px">
							辅码流
						</div>
						<div class="wos-flex margin10">
							<div style="padding-left: 20px">
								<input type="checkbox" checked>
							</div>
							<div style="padding-left: 20px">
								启用视频
							</div>
						</div>

						<div class="wos-flex margin10">
							<div class="input-title">码流类型：</div>
							<select class="wos-input input-width asd-width">
								<option value="">辅码流1</option>
								<option value="">辅码流2</option>
							</select>
						</div>

						<div class="wos-flex margin10">
							<div class="input-title">编码模式：</div>
							<select class="wos-input input-width asd-width">
								<option value="">H.264</option>
								<option value="">H.265</option>
							</select>
						</div>

						<div class="wos-flex margin10">
							<div class="input-title">分辨率：</div>
							<select class="wos-input input-width asd-width">
								<option value="">704*576(D1)</option>
								<option value="">640*489(VGA)</option>
								<option value="">352*288(CIF)</option>
							</select>
						</div>

						<div class="wos-flex margin10">
							<div class="input-title">帧率(FPS)：</div>
							<select class="wos-input input-width asd-width">
								<option value="">1</option>
								<option value="">2</option>
								<option value="">3</option>
								<option value="">4</option>
								<option value="">5</option>
								<option value="">6</option>
								<option value="">7</option>
								<option value="">8</option>
								<option value="">9</option>
								<option value="">10</option>
								<option value="">11</option>
								<option value="">12</option>
								<option value="">13</option>
								<option value="">14</option>
								<option value="">15</option>
								<option value="">16</option>
								<option value="">17</option>
								<option value="">18</option>
								<option value="">19</option>
								<option value="">21</option>
								<option value="">22</option>
								<option value="">23</option>
								<option value="">24</option>
								<option value="">25</option>
							</select>
						</div>

						<div class="wos-flex margin10">
							<div class="input-title">码流控制：</div>
							<select class="wos-input input-width asd-width">
								<option value="">辅码流1</option>
								<option value="">辅码流2</option>
							</select>
						</div>

						<div class="wos-flex margin10">
							<div class="input-title">码流值：</div>
							<select class="wos-input input-width asd-width">
								<option value="">256</option>
								<option value="">320</option>
								<option value="">384</option>
								<option value="">448</option>
								<option value="">512</option>
								<option value="">640</option>
								<option value="">768</option>
								<option value="">896</option>
								<option value="">1024</option>
								<option value="">1280</option>
								<option value="">1536</option>
								<option value="">1792</option>
								<option value="">2048</option>
								<option value="">自定义</option>
							</select>
							<div style="position: absolute;margin-left: 310px">Kb/S</div>
						</div>

						<div class="wos-flex margin10">
							<div class="input-title">参考码流值：</div>
							<div>256-2304Kb/S</div>
						</div>

						<div class="wos-flex margin10">
							<div style="padding-left: 20px">
								<input type="checkbox">
							</div>
							<div style="padding-left: 20px">
								启用视频
							</div>
						</div>

						<div class="wos-flex margin10">
							<div class="input-title">音频编码：</div>
							<select class="wos-input input-width asd-width">
								<option value="">G.711A</option>
								<option value="">PCM</option>
								<option value="">G.711Mu</option>
								<option value="">G.726</option>
								<option value="">AAC</option>
							</select>
						</div>

						<div class="wos-flex margin10">
							<div class="input-title">水印字符串：</div>
							<input type="text" class="wos-input input-width asd-width" value="DigitalCCTV">
						</div>

					</div>

				</div>
			</div>
			<div id="plan-b" v-show="menu === '通道名称'">
				<div class="wos-table" style="margin-top: 20px">
					<wos-table :record="pathName"></wos-table>
				</div>
			</div>
			<div id="plan-a" v-show="menu === '远程'">
				<div id="plan-a-c" v-show="nav === '信息'">
					<div class="wos-table" style="margin-top: 20px">
						<wos-table :record="infoData"></wos-table>
					</div>
				</div>
				<div id="plan-a-b" v-show="nav === '升级'">
					<div class="wos-flex">
						<div style="padding-right: 30px">导入升级文件</div>
						<div style="padding-right: 10px">
							<input type="text" class="wos-input">
						</div>
						<div>
							<button class="wos-btn wos-btn-no wos-btn-input">导入</button>
						</div>
					</div>
					<div class="wos-flex" style="margin-top: 20px">
						<div style="width: 50%">设备升级</div>
						<div class="wos-flex">
							<div style="padding-right: 30px">设备类型</div>
							<div>
								<select class="wos-input" style="width: 250px">
									<option value=""></option>
								</select>
							</div>
						</div>
					</div>
					<div class="wos-table" style="margin-top: 20px">
						<wos-table :record="updateData"></wos-table>
					</div>
				</div>

				<div id="plan-a-a" v-show="nav === '设备'">
					<!--自动搜索-->
					<div class="wos-tab">
						<div class="wos-tab-title wos-flex-between wos-flex" @click="autoSearchPlan = !autoSearchPlan">
							<div>
								自动搜索
							</div>
							<div>
								<i class="iconfont icon-down" v-if="autoSearchPlan === false"></i>
								<i class="iconfont icon-up" v-else></i>
							</div>
						</div>
						<div class="wos-tab-main" v-show=" autoSearchPlan === true">
							<div style="height: 360px; width: 100%;border: 1px solid #C2C4C9">
								<div style="line-height: 360px;text-align:center" v-if="findDiver === false">
									<button class="wos-btn wos-btn-yes wos-hand" style="width: 120px" @click="findDiver = true">
										<i class="iconfont icon-wifi"></i>发现设备
									</button>
								</div>
								<div v-else>
									<autoSearch></autoSearch>
								</div>
							</div>
						</div>
					</div>
					<!--手动添加-->
					<div class="wos-tab">
						<div class="wos-tab-title wos-flex-between wos-flex" @click="insertPlan = !insertPlan">
							<div>
								手动添加
							</div>
							<div>
								<i class="iconfont icon-down" v-if="insertPlan === false"></i>
								<i class="iconfont icon-up" v-else></i>
							</div>
						</div>
						<div class="wos-tab-main" v-show=" insertPlan === true" style="border: 1px solid #DDDDDD">
							<div class="wos-table-line wos-flex">
								<div class="wos-margin-right-10 wos-hand" @click="addPathShow = true">
									<i class="iconfont icon-jia wos-green wos-margin-right-10 wos-font-sm"></i> 添加
								</div>
								<div class="wos-margin-right-10">
									<i class="iconfont icon-x1 wos-color-red wos-margin-right-10 wos-font-sm"></i> 删除
								</div>
								<div class="wos-margin-right-10">
									<i class="iconfont icon-download wos-blue wos-margin-right-10 wos-font-sm"></i> 导入
								</div>
								<div class="wos-margin-right-10">
									<i class="iconfont icon-upload wos-blue wos-margin-right-10 wos-font-sm"></i> 导出
								</div>
							</div>
							<wos-table :record="canvas" @del="del" @show="show" @edit="edit"></wos-table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- model 远程-设备-手动添加-添加-->
		<addPath :show="addPathShow" @doShow="doShow"></addPath>
		<edit :show="editShow" @doShow="doShow"></edit>
		<div class="console">
			<div v-show="menu === '远程'">
				<div v-show="nav === '设备'">
					<button @click="refresh">刷新</button>
				</div>
				<div v-show="nav === '升级'">
					<button @click="refresh">开始升级</button>
				</div>
				<div v-show="nav === '信息'">
					<button @click="refresh">刷新</button>
				</div>
			</div>
			<div v-show="menu === '通道名称'">
				<button @click="refresh" class="active">确定</button>
				<button @click="refresh">刷新</button>
				<button @click="refresh">默认</button>
			</div>
			<div v-show="menu === '编码设置'">
				<div v-show="nav === '编码设置'">
					<button @click="refresh">应用到</button>
					<button @click="refresh" class="active">确定</button>
					<button @click="refresh">刷新</button>
					<button @click="refresh">默认</button>
				</div>
				<div v-show="nav === '图片码流'">
					<button @click="refresh" class="active">确定</button>
					<button @click="refresh">刷新</button>
				</div>
			</div>

		</div>


	</div>
</template>

<script>
	import addPath from './canvas/addPath.vue'
    import edit from './canvas/edit.vue'
	import autoSearch from './canvas/autoSearch.vue'
    export default {
        name: "canvas",
	    components:{
            addPath,
            autoSearch,
            edit
	    },
        data:function(){
            return {
                menu:"远程",
	            nav:'设备',
                canvas:[],
                autoData:[],
                autoSearchPlan:false,
                insertPlan:true,
                findDiver:false,
                addPathShow:false,
                editShow:false,
                updateData:[],
                infoData:[],
                pathName:[]
            }
        },
        beforeMount() {
            this.getData()

        },
        methods:{
            navGo(s){
              if (s===1){
                  this.menu = '远程'
                  this.nav = '设备'
              }else if(s===3){
                  this.menu = '编码设置'
	              this.nav = '编码设置'
              }
            },
            doShow(dataKey){
                this[dataKey] =  !this[dataKey]
            },
            del(){
              alert('无法删除，请联系管理员')
            },
	        edit(){
                this.editShow = true
	        },
	        show(obj){
                console.log(obj)
	        },
            getData(){
                let that = this
                this.axios.get('/api/direct/canvas.json')
                    .then(function (response) {
                        if( response.data.code == 200) {
                            that.canvas = response.data.data
	                        that.autoData = response.data.autoData
	                        that.updateData = response.data.updateData
	                        that.infoData = response.data.infoData
	                        that.pathName = response.data.pathName
                        }
                    })
                    .catch(function (error) {
                        that.$message.warn('服务器连接超时，请稍后重试')
                    });
            },
            refresh(){
                this.getData()
                this.jumpTop()
            }
        }
    }
</script>
<style scoped lang="less">
	.menu-top{
		padding: 20px;
		border: 1px solid #CCCBC9;
	}
	.input-title{
		width: 120px;
		padding-right: 20px;
	}
	.input-width{
		width: 130px;
	}
	.margin10{
		margin: 20px 0;
	}
	.asd-width{
		width: 200px;
	}
</style>
